<template>
  <div class="gl_contentBox gl_heightFull">
    <div class="Top">
      <el-row :gutter="20">
        <!-- 创建日期 -->
        <el-col :md="24" style="margin-right:50px">
          <p>积分计算时间</p>
          <el-date-picker
            v-model="freeDay"
            type="daterange"
            :range-separator="$t('search.to')"
            :start-placeholder="$t('search.placeholder_Date')"
            :end-placeholder="$t('search.placeholder_Date')"
            size="mini"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            style="width: 30%"
            @change="timeChange"
          />
        </el-col>
        <el-col v-for="(item,index) in yearList" :key="item" :md="3" style="margin-top:18px">
          <p>{{ item }}年权重</p>
          <div class="demo-input-size">
            <el-input v-model="yearWeights[index]" max="100" type="number" size="mini" placeholder="全部" clearable @input="weight(index)" /><span class="gl_ml_5 gl_fs_12">%</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-tabs v-if="LevelId" v-model="activeTab" type="border-card" @tab-click="LevelTab">
        <el-tab-pane v-for="(item, index) in tabList" :key="index" :label="item.label" :name="item.name">
          <component :is="item.component" v-if="item.name===name" :active-tab="LevelId" :years="yearList" :year-weights="yearWeights" :year-time="yearTime" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import matchList from './matchList.vue';
import { SiSTKWEventsManagementPlatformPointWeightGroupDto } from '@/lib/form/game/swaggerForm';
import { api_GET_EventsManagementCompetitionLevel, api_GET_EventsManagementPointSettingPlatformPointSettingCompetitionLevelId } from '@/extend/api/gameswaggerApi/app';
export default {
  components: { matchList },
  data() {
    return {
      name: '0',
      LevelId: '', // 单独赛事级别id
      SiSTKWEventsManagementPlatformPointWeightGroupDto: new SiSTKWEventsManagementPlatformPointWeightGroupDto(),
      activeTab: '0',
      yearScope: [],
      tabList: [
        // {
        //   label: '国家级比赛',
        //   name: 'country',
        //   component: 'matchList'
        // },
        // {
        //   label: '省级比赛',
        //   name: 'province',
        //   component: 'matchList'
        // },
        // {
        //   label: '市级比赛',
        //   name: 'city',
        //   component: 'matchList'
        // },
        // {
        //   label: '区县级比赛',
        //   name: 'county',
        //   component: 'matchList'
        // },
        // {
        //   label: '一般级比赛',
        //   name: 'normal',
        //   component: 'matchList'
        // }
      ],
      freeDay: [],
      ranking: {
        paiming: []
      },
      yearList: [],
      yearTime: [],
      rules: {
        paiming: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      },
      yearWeights: []
    };
  },
  watch: {
    freeDay: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val && val.length !== 0) {
          this.changeProportion(val);
        } else {
          this.yearList = [];
          this.yearTime = [];
        }
      }
    }
  },
  created() {
    api_GET_EventsManagementCompetitionLevel().then((res) => {
      res.items = res.items.sort(function(a, b) {
        return a.level - b.level;
      });
      for (var i = 0; i < res.items.length; i++) {
        const shu = {};
        this.tabList.push(shu);
        this.tabList[i].label = res.items[i].name;
        this.tabList[i].component = 'matchList';
        this.tabList[i].name = JSON.stringify(i);
        this.tabList[i].id = res.items[i].id;
      }
      this.LevelId = res.items[0].id;
      this.getCompetitionLevelId(this.LevelId);
    });
  },
  methods: {
    // 获取积分设置
    getCompetitionLevelId(id) {
      api_GET_EventsManagementPointSettingPlatformPointSettingCompetitionLevelId(id).then((res) => {
        this.freeDay = [res.startTime, res.endTime];
        for (var i = 0; i < res.yearWeights.length; i++) {
          this.yearWeights[i] = parseFloat((res.yearWeights[i].weight * 100).toPrecision(12)).toFixed(1);
        }
      });
    },
    timeChange(time) {
      this.yearWeights = [];
    },
    // 根据时间获取年份列表
    changeProportion(val) {
      var myData = new Date();
      var nowYear = myData.getFullYear();
      if (Number(val[1].split('-')[0]) > nowYear) {
        this.$message('不能大于当前年份');
        this.yearWeights = [];
        this.freeDay = [];
        return;
      }
      if (Number(val[0].split('-')[0]) < 2020) {
        this.$message('不能小于2020年份');
        this.yearWeights = [];
        this.freeDay = [];
        return;
      }
      this.yearScope[0] = Number(val[0].split('-')[0]);
      this.yearScope[1] = Number(val[1].split('-')[0]);
      this.yearList = [];
      this.yearTime = val;
      for (let i = this.yearScope[0]; i <= this.yearScope[1]; i++) {
        this.yearList.push(i);
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    LevelTab(tab) {
      this.LevelId = this.tabList[tab.index].id;
      console.log(this.tabList[tab.index].id);
      this.getCompetitionLevelId(this.LevelId);
      this.name = tab.index;
    },
    weight(index) {
      if (!/^\d*\.{0,1}\d{0,1}$/g.test(this.yearWeights[index])) {
        this.$message('必须是数字,小数点小于1位');
        this.yearWeights[index] = parseFloat(this.yearWeights[index]).toFixed(2).substring(0, this.yearWeights[index].lastIndexOf('.') + 2);
        return;
      }
      if (this.yearWeights[index] > 100 || this.yearWeights[index] < 0) {
        this.yearWeights[index] = '';
        this.$message('必须在0-100之间');
      }
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 14px;
}
.demo-input-size {
  display: flex;
  align-items: center;
}
.Top{
  padding: 10px;
  min-height: 90px;
  margin-bottom: 20px;
  background: #ffffff;
  border: 2px dashed rgba(0,0,0,0.10);
  border-radius: 6px;
}
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none!important;
  }
::v-deep input[type="number"]{
    -moz-appearance: textfield;
  }
</style>
